<template>
  <div>
    <div class="header_top">
      <el-select
        v-model="obj.status"
        style="width: 100px; font-size: 16px; height: 40px; text-align: center"
        name="status"
        id=""
        placeholder="状态"
      >
        <el-option style="font-size: 16px" value="已领取">已领取</el-option>
        <el-option style="font-size: 16px" value="寄存中">寄存中</el-option>
      </el-select>
      <div>
        <el-date-picker
          v-model="obj.deposit_date"
          type="date"
          placeholder="寄存时间"
          format="YYYY/MM/DD"
          value-format="YYYY-MM-DD"
        />
        -
        <el-date-picker
          v-model="obj.Extraction_time"
          type="date"
          placeholder="提取时间"
          format="YYYY/MM/DD"
          value-format="YYYY-MM-DD"
        />
      </div>

      <el-input
        v-model="obj.deposit_article"
        style="width: 150px"
        placeholder="寄存物品"
      />
      <el-input
        v-model="obj.registrant"
        style="width: 150px"
        placeholder="登记人"
      />
      <el-button class="search_btn" @click="search">查询</el-button>
      <!-- <el-button class="btn_border" @click="">重置</el-button> -->
      <el-button class="add_btn" @click="add">寄存</el-button>
    </div>
    <el-table
      :header-cell-style="{
        backgroundColor: '#dfdcea',
        color: 'black',
        fontSize: '14px',
        textAlign: 'center',
      }"
      :cell-style="{
        color: 'black',
        fontSize: '14px',
        textAlign: 'center',
        border: '1px solid #dfdcea',
      }"
      :data="tableData"
      style="width: 100%"
      size="large"
    >
      <el-table-column
        prop="deposit_date"
        :formatter="DateFormat"
        label="寄存时间"
        width="180"
      />
      <el-table-column prop="deposit_article" label="寄存物品" width="180" />
      <el-table-column prop="num" label="数量" width="180" />
      <el-table-column prop="custom_id.name" label="寄存人" width="180" />
      <el-table-column prop="custom_id.tell" label="联系方式" width="180" />
      <el-table-column prop="deposit_day" label="寄存天数" width="180" />
      <el-table-column prop="registrant" label="登记人" width="180" />
      <el-table-column prop="status" label="状态" width="180" />
      <el-table-column prop="Extract_people" label="提取人" width="180" />
      <el-table-column
        prop="Extraction_time"
        :formatter="DateFormat"
        label="提取时间"
        width="180"
      />

      <el-table-column fixed="right" label="操作" min-width="150">
        <template #default="scope">
          <el-button
            link
            size="small"
            :class="[status == '寄存中' ? 'table_extract' : 'table_extract1']"
            @click="extract(scope.row)"
          >
            提取
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <el-dialog
    v-model="dialogVisible"
    title="提取登记"
    width="1000"
    draggable="true"
    :before-close="handleClose"
  >
    <div>
      <div class="Extract_top">
        <span>提取人：</span>
        <input
          type="radio"
          v-model="editForm.Extract_people"
          name="Extract_people
"
          value="本人提取"
        />本人提取<input
          v-model="Others_extract"
          type="radio"
          name="Extract_people"
          value="他人提取"
        />他人提取
      </div>
      <div :class="[Others_extract == '他人提取' ? 'show' : 'hide']">
        <p>
          代取人手机号码：
          <el-input
            v-model="editForm.Extract_people"
            style="width: 240px"
            placeholder="请填写代取人手机号码"
          />
        </p>
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button class="extract_btn" @click="extract_btn"> 确认 </el-button>
      </div>
    </template>
  </el-dialog>

  <div style="margin: 30px 0">
    <el-pagination
      :page-sizes="[3, 5, 9, 15]"
      @next-click="nextClick"
      @prev-click="prevClick"
      :page-size="obj.pageSize"
      @current-change="currentChange"
      @size-change="sizeChange"
      :current-page="obj.currenPage"
      background
      layout="total,sizes,prev, pager, next,jumper"
      :total="totals"
    />
  </div>
</template>

<script setup lang='ts'>
import { ref, reactive, onMounted } from "vue";
import moment from "moment";
import http from "../utils/request";

function DateFormat(row, column) {
  var data = row[column.property];
  if (data == undefined) {
    return "";
  }
  return moment(data).format("YYYY-MM-DD HH:mm");
  // return moment(data).format('YYYY-MM-DD HH:mm:ss');
}

let Others_extract = ref(null);
let deposits = ref([]);
let totals = ref(0);
let dialogVisible = ref(false);
let editForm = ref({});
let obj = ref({
  currentPage: 1,
  pageSize: 5,
  status: "",
  deposit_date: "",
  Extraction_time: "",
  registrant: "",
  name: "",
  tell: "",
  deposit_article:""
});

let tableData = deposits;

let search = () => {
  getDeposit();
};

let extract = (row) => {
  dialogVisible.value = true;
  editForm.value = row;
  editForm.value = {
    _id: row._id,
    status: "已领取",
    Extraction_time: new Date(),
  };
};

let extract_btn = async () => {
  let {
    data: { code, msg },
  } = await http.put("deposit_edit", editForm.value);

  if (code == 200) {
    console.log(editForm.value);

    dialogVisible.value = false;
    getDeposit();
  }
};

let getDeposit = async () => {
  let {
    data: { total, pagelist },
  } = await http.get("deposit", { params: obj.value });
  deposits.value = pagelist;
  totals.value = total;
};

let nextClick = (val) => {
  obj.value.currentPage = val;
  getDeposit();
};

let sizeChange = (val) => {
  obj.value.pageSize = val;
  getDeposit();
};

let currentChange = (val) => {
  obj.value.currentPage = val;
  getDeposit();
};

let prevClick = (val) => {
  obj.value.currentPage = val;
  getDeposit();
};

onMounted(() => {
  getDeposit();
});
</script>
<style lang='scss' scoped>
.Extract_top {
  display: flex;
  height: 30px;
  line-height: 30px;
}
.hide {
  display: none;
}
.extract_btn {
  background: #5d4f96;
  color: white;
}
.table_extract {
  color: #5d4f96;
}
.table_extract1 {
  color: black;
}

.header_top {
  margin: 20px 0;
  display: flex;
  justify-content: space-around;
}
.demo-time-range {
  display: flex;
}
.search_btn {
  border: 1px solid #5d4f96;
  background: #5d4f96;
  color: white;
}

.add_btn {
  border: 1px solid #5d4f96;
  color: #5d4f96;
}
</style>